<template>
	<view class="spike_goods_item" @click="onPageJump">
		<image :src="itemData.img" mode="aspectFill"></image>
		<view class="spike_info">
			<view class="info_top">
				<text class="title">{{itemData.name}}</text>
				<view class="schedule_info">
					<view class="schedule">
						<view class="value" :style="{width:spikeProgress+'%'}"></view>
						<text class="ratio">{{spikeProgress}}%</text>
					</view>
					<text>已抢{{itemData.numSales}}件</text>
				</view>
				<view class="countdown">{{countdownText}}<text>{{countdownTime}}</text></view>
			</view>
			<view class="price_btn">
				<view class="price_info">
					<text>{{itemData.spikePrice}}</text>
					<text>{{itemData.priceShop}}</text>
				</view>
				<button v-if="buyState == 1000 && itemData.spikeProgress < 1" class="active">马上抢</button>
				<button v-else-if="itemData.spikeProgress >= 1">已抢完</button>
				<button v-else-if="buyState == 2000">未开始</button>
				<button v-else-if="buyState == 3000">已结束</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			index: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		data() {
			return {
				itemData: {},
				countdownText: "剩余",
				countdownTime: "",
				// 1000 可以购买
				// 2000 还未开始
				// 3000 已结束
				buyState: 1000,
				spikeProgress:0,
                clearTime: null
			}
		},
		created() {
			this.spikeProgress = parseInt(this.item.spikeProgress * 100);
			this.itemData = this.item;
			this.getCountdown();
		},
		watch: {
			item(val) {
				this.spikeProgress = parseInt(val.spikeProgress * 100);
				this.itemData = val;
                clearTimeout(this.clearTime);
				this.getCountdown();
			}
		},
		methods: {
			onPageJump() {
				uni.navigateTo({
					url: "/pages/home/shop/goodsDetail?objId=" + this.itemData.objId
				});
			},
			getCountdown() {
                if(this.itemData.spikeEndTime && this.itemData.spikeBeginTime){
                    let spikeEndTime = this.itemData.spikeEndTime.replace(/-/g,"/");
                    let spikeBeginTime = this.itemData.spikeBeginTime.replace(/-/g,"/");
                    let beginTime = new Date(spikeBeginTime).getTime();
                    let endTime = new Date(spikeEndTime).getTime();
                    const _this = this;
                    this.clearTime && clearTimeout(this.clearTime);
                    function recursion() {
                    	let currentTime = new Date().getTime();
                    	if (currentTime < beginTime) {
                    		_this.countdownText = "开始时间";
                    		_this.countdownTime = _this.itemData.spikeBeginTime;
                    		_this.buyState = 2000;
                    	} else if (currentTime > endTime) {
                    		_this.countdownText = "结束时间";
                    		_this.countdownTime = _this.itemData.spikeEndTime;
                    		_this.buyState = 3000;
                    	} else {
                    		_this.buyState = 1000;
                    		_this.countdownText = "剩余";
                    		
                    		let surplus = (endTime - currentTime) / 1000;
                    		let day = parseInt(surplus / 86400);
                    		let hour = parseInt((surplus - day * 86400) / 3600);
                    		let minute = parseInt((surplus - day * 86400 - hour * 3600) / 60);
                    		let second = parseInt(surplus - day * 86400 - hour * 3600 - minute * 60);
                    		let countdownTime = "";
                    		// console.log("day="+day,"hour="+hour,"minute="+minute,"second="+second);
                    		if(day > 0){
                    			if (day < 10) {
                    				day = "0" + day;
                    			}
                    			countdownTime += day+"天";
                    		}
                    		if(hour > 0){
                    			if (hour < 10) {
                    				hour = "0" + hour;
                    			}
                    			
                    			countdownTime += hour+"时";
                    		}else if(countdownTime.length > 0){
                    			countdownTime += "00时";
                    		}
                    		if(minute > 0){
                    			if (minute < 10) {
                    				minute = "0" + minute;
                    			}
                    			countdownTime += minute+"分";
                    		}else if(countdownTime.length > 0){
                    			countdownTime += "00分";
                    		}
                    		if(second > 0){
                    			if (second < 10) {
                    				second = "0" + second;
                    			}
                    			countdownTime += second+"秒";
                    		}else if(countdownTime.length > 0){
                    			countdownTime += "00秒";
                    		}
                    		_this.countdownTime = countdownTime;
                    		_this.clearTime = setTimeout(() => {
                    			recursion();
                    		}, 1000);
                    	}
                    }
                    recursion();
                }
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.spike_goods_item {
		margin: 0rpx 32rpx 20rpx 32rpx;
		padding: 20rpx;
		background: #ffffff;
		display: flex;
		border-radius: 8rpx;

		>image {
			width: 260rpx;
			height: 260rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 22rpx;
		}

		.spike_info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: calc(100% - 282rpx);

			.title {
				font-size: 28rpx;
				color: #333333;
				@include bov();
			}

			.schedule_info {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.schedule {
					width: 240rpx;
					height: 20rpx;
					background-color: #f7f7f7;
					border-radius: 10rpx;
					position: relative;
					

					.value {
						height: 20rpx;
						background-color: #ff243b;
						border-radius: 10rpx;
					}

					.ratio {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
						font-size: 18rpx;
						color: #ff243b;
					}
				}

				>text {
					font-size: 24rpx;
					color: #999999;
					margin-left: 11rpx;
				}
			}

			.countdown {
				font-size: 24rpx;
				color: #333333;
				margin-top: 15rpx;

				text {
					color: #ff4040;
				}
			}

			.price_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price_info {
					display: flex;
					align-items: center;

					text:nth-child(1) {
						font-size: 32rpx;
						color: #ff4040;
					}

					text:nth-child(2) {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;
						margin-left: 12rpx;
					}
				}

				button {
					width: 141rpx;
					height: 66rpx;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 66rpx;
					background-color: #eee;

					&.active {
						@include theme("gradient_bg");
					}
				}
			}
		}
	}
</style>
